<template>
    <div class="components-container">
        <sweet-modal ref="dialog" class="dialog" :sweetModalMaxWidth="800">
            <h3>收费项目选择</h3>
            <div style="display:flex;width:100%;height:700px;">
                <div style="width: 100%;height:700px;">
                    <div style="width:100%;height:60%;">
                        <el-form ref="form" inline label-position="left" :model="searchData" label-width="100px">
                            <el-form-item class="form-item" label="收费项目名称">
                                <el-input size="mini" v-model="searchData.nameLike" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item class="form-btn" label-width="20px">
                                <el-button size="mini" round style="margin-left:20px;" class="search-btn" type="primary" @click="getAllCharge">搜索
                                </el-button>
                                <el-button @click="makeSure()" size="mini" style="margin-bottom:10px;" round type="warning">确认选中收费项</el-button>
                            </el-form-item>
                        </el-form>
                        <el-table :data="chargeData" border :height="`calc(100% - 100px)`" style="width: 100%;" @row-dblclick="dbclick">
                            <!-- <el-table-column label="快速代码" prop="CHADM" align="center">
                            </el-table-column> -->
                            <el-table-column label="收费名称" prop="CHANAME" align="center">
                            </el-table-column>
                            <el-table-column label="现行标准" prop="CHAMONEY" align="center">
                            </el-table-column>
                            <el-table-column label="计量单位" prop="CHAAUNIT" align="center">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div style="width:100%;height:35%;">
                        <h3 style="margin-top:20px;">收费项目选择</h3>
                        <el-table ref="table" :data="chooseChargeData" border :height="`calc(100% - 30px)`" style="width: 100%;" @row-dblclick="deleteCharge">
                            <!-- <el-table-column label="快速代码" prop="CHADM" align="center">
                            </el-table-column> -->
                            <el-table-column label="收费名称" prop="CHANAME" align="center">
                            </el-table-column>
                            <el-table-column label="现行标准" prop="CHAMONEY" align="center">
                            </el-table-column>
                            <el-table-column label="计量单位" prop="CHAAUNIT" align="center">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </sweet-modal>
    </div>
</template>
<style rel="stylesheet/scss" lang="scss">
@import "src/styles/common.scss";

div {
    cursor: pointer;
}
.scrollNone {
    overflow-y: scroll;
}
.scrollNone::-webkit-scrollbar {
    display: none;
}
</style>
<script>
import sweetModal from "@/components/sweetModal";
import apiBase from "@/api/apiBase.js";
import { accAdd } from "@/utils/operations.js";
import { formatDate, timeStringToDate } from "@/utils/date.js";
import { manage } from "@/mixins/managePage.js";
export default {
    name: "oldCemManageItemMain",
    mixins: [manage],
    props: {
        SOURCE: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            chargeMainData: [],
            chargeData: [],
            chooseChargeData: [],
            chacypidEqual: null,
            searchData: {},
            chlList: []
        };
    },
    //计算属性
    computed: {},
    methods: {
        select(e) {
            this.getAllCharge(e.index);
        },
        open(order, chlList) {
            this.chlList = chlList;
            this.getAllCharge();
            switch (order) {
                case "选择收费项目":
                    this.chooseChargeData = [];
                    this.$refs.dialog.open();
                    break;
                default:
                    break;
            }
        },
        selectCharge() {
            if(this.chargeDat){
            this.chargeData = this.chargeData.filter(
                item => !this.chlList.some(ele => ele.CHLCHAID === item.CHAID)
            );
            }
        },
        getAllCharge(val) {
            if (val) {
                this.chacypidEqual = val;
            } else {
                this.chacypidEqual = null;
            }
            apiBase.DoService(
                {
                    SOURCE: this.SOURCE,
                    CHANAME: this.searchData.nameLike
                },
                apiBase.getApiAdress().Checkout.GetChargeByChaname,
                res => {
                    this.chargeData = res.data.content;
                    this.selectCharge();
                }
            );
        },
        dbclick(row) {
            let bool = false;
            this.chooseChargeData.forEach((item, index) => {
                if (row.CHAID == item.CHAID) {
                    bool = true;
                }
            });
            if (bool) {
                return;
            }
            this.chooseChargeData.push(row);
            this.$nextTick(() => {
                this.$refs.table.bodyWrapper.scrollTop = this.$refs.table.bodyWrapper.scrollHeight;
            });
        },
        // 删除
        deleteCharge(row) {
            this.chooseChargeData.forEach((item, index) => {
                if (item == row) {
                    this.chooseChargeData.splice(index, 1);
                }
            });
        },
        // 确认选中
        makeSure() {
            if (this.chooseChargeData.length > 0) {
                this.$emit("makeSure", this.chooseChargeData);
                this.$refs.dialog.close();
            } else {
                this.$message({
                    showClose: true,
                    message: `请选中收费项目`,
                    type: "warning"
                });
            }
        }
    },
    mounted() {},
    components: {
        sweetModal
    },
    created() {},
    activated() {
        apiBase.DoService(
            {},
            apiBase.getApiAdress().ChargeProject.QueryType,
            res => {
                this.chargeMainData = res.data.content;
                this.getAllCharge();
            }
        );
    }
};
</script>
